<!--
 * @Author: zhangmengqiong
 * @Date: 2021-04-21 14:41:53
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-04-21 14:54:09
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d'); // 获取Canvas 对象
      ctx.fillStyle = 'red'; // 修改填充色为红色
      ctx.fillRect(0, 0, 50, 50); // 绘制矩形，0，0 XY轴坐标 50，50是宽高

      // 绘制线条
      ctx.beginPath();
      ctx.lineWidth = 1; // 线条宽度
      ctx.strokeStyle = 'blue'; // 线条填充色
      ctx.moveTo(100, 100); // 起点坐标
      ctx.lineTo(250, 75); // 中间点坐标
      ctx.lineTo(400, 140); // 终点坐标
      ctx.stroke(); // 绘制线段

      // 绘制圆型
      ctx.beginPath();
      ctx.lineWidth = 3; // 圆形宽度
      ctx.strokeStyle = 'green'; // 圆形填充色
      ctx.fillStyle = 'red';
      ctx.arc(300, 300, 50, 0, 2 * Math.PI); // 绘制圆形，300，300 圆心坐标 50半径
      ctx.stroke(); // 绘制圆边框
      ctx.fill(); // 填充圆

      // 绘制点
      ctx.beginPath();
      ctx.lineWidth = 2; // 线条宽度
      ctx.strokeStyle = 'red'; // 线条填充色
      ctx.moveTo(400, 400); // 起点坐标
      ctx.lineTo(401, 401); // 终点坐标
      ctx.stroke(); // 绘制线段
    </script>
  </body>
</html>
